<template>
  <div>
    <el-card>
      <el-row class="hasder-text">店铺账户</el-row>
      <el-row class="hasder-row">
        <span class="hasder-box">账户余额:</span>
        <span class="hasder-money">￥4000.00</span>
      </el-row>
      <el-row class="middle">
        <span class="middle-box">可提现金额:</span>
        <span class="hasder-money">￥4000.00</span>
      </el-row>
      <el-row class="box">注: 部分金额由于订单尚未完成，资金处于冻结状态</el-row>
      <el-row class="clickJump">
        <a href="javascript:;" @click="clickJumps">查看明细</a>
      </el-row>
      <el-row>
        <el-button type="success" size="max">提现</el-button>
      </el-row>
      <el-row class="bottom-text">
        <span>注:提现到开通商户的微信钱包</span>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    clickJumps() {
      this.$router.push('/shopDetails')
    }
  }
}
</script>

<style lang="less" scoped>
.hasder-text {
  font-size: 15px;
  color: #333333;
  padding-bottom: 20px;
}
.hasder-row {
  margin-bottom: 20px;
}
.hasder-box {
  margin-left: 28px;
  font-size: 25px;
  font-weight: 600;
}
.hasder-money {
  font-size: 28px;
  color: #ff0d0d;
}
.middle-box {
  font-size: 22px;
  color: #333333;
}
.box {
  color: #7b7b7b;
  font-size: 12px;
  margin-left: 28px;
}
.middle {
  margin-left: 28px;
}
.clickJump {
  margin: 10px 0;
}
.clickJump a {
  margin-left: 28px;
}
.el-button {
  margin: 10px 28px;
  width: 150px;
}
.bottom-text {
  color: #7b7b7b;
  font-size: 14px;
}
.bottom-text span {
  margin-left: 28px;
}
</style>
